<script setup>
import ItemOne from './ItemOne.vue'
import ItemTwo from './ItemTwo.vue'
import ItemThree from './ItemThree.vue'
import ItemFour from './ItemFour.vue'
import MapPage from './MapPage.vue'
import * as echarts from 'echarts'
import axios from 'axios'
import { provide } from 'vue'
provide('axios', axios)
provide('echarts', echarts)
</script>
<template>
  <div class="container">
    <header class="header">可视化练习-echarts</header>
    <section class="main">
      <section class="item-left">
        <item-one></item-one>
        <item-two></item-two>
      </section>
      <section class="item-middle">
        <map-page></map-page>
      </section>
      <section class="item-right">
        <item-three></item-three>
        <item-four></item-four>
      </section>
    </section>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: url('../assets/bg.jpg') no-repeat top center;
  .header {
    // background-color: skyblue;
    height: 10vh;
    width: 100%;
    text-align: center;
    line-height: 1rem;
    font-family: '微软雅黑';
    font-weight: 500;
    font-size: 0.4rem;
    font-style: normal;
    color: rgb(54, 54, 96);
  }
  .main {
    background-color: rgba(179, 223, 246, 0.3);
    height: 90vh;
    width: 100%;
    display: flex;
    .item-left,
    .item-right {
      padding: 0.1rem 0.1rem 0 0.1rem;
      // background-color: rgb(244, 155, 20);
      flex: 3;
    }
    .item-middle {
      flex: 5;
      // background-color: antiquewhite;
      margin: 0 0.2rem;
    }
  }
}
</style>
